<template>
<div>
  <div class="box box-custom">
    <div class="box-header with-border">
      <h3 class="box-title">老年人信息</h3>
      <button type="button" class="btn btn-custom pull-right left10" v-on:click="showAdd()">新增人员</button>
      <button type="button" class="btn btn-custom pull-right left10" v-on:click="importAssessmentDialog = true">导入调查结果</button>
    </div>
    <div class="box-body">
      <div class="clearfix bottom10">
        <div class="pull-left searchBox">
          <div class="form-horizontal top10">
              <div class="form-inline bottom10">
                <div class="input-group">
                  <span class="input-group-addon">姓名</span>
                  <input type="text" class="form-control" placeholder="姓名" name="name" v-model="searchData.name">
                </div>
                <div class="input-group">
                  <span class="input-group-addon">性别</span>
                  <select class="form-control" placeholder="性别" name="sex" v-model="searchData.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                  </select>
                </div>
                <div class="input-group">
                  <span class="input-group-addon">联系电话</span>
                  <input type="text" class="form-control" placeholder="联系电话" name="phone" v-model="searchData.phone">
                </div>
              </div>
              <div class="form-inline">
                <div class="input-group">
                  <span class="input-group-addon">身份证</span>
                  <input type="text" class="form-control" placeholder="身份证" name="idNumber" v-model="searchData.idNumber">
                </div>
                <div class="input-group">
                  <button type="botton" class="btn btn-custom" v-on:click="searchPersonnel">
                    <span class="fa fa-search"></span> 搜索
                  </button>
                  <button type="botton" class="btn left10" v-on:click="chearSearch"><i class="el-icon-delete"></i> 清空</button>
                </div>
              </div>
          </div>
        </div>
        <div class="pull-right userLogo left10">
          <img class="img-thumbnail" :src="$store.getters.getUserData.logo" alt="logo" />
        </div>
      </div>
      <el-table class="table table-bordered"
        style="width: 100%"
        size="small"
        border
        stripe
        highlight-current-row
        :data="personnelList"
        >
          <el-table-column prop="name" label="姓名" width="70">
          </el-table-column>
          <el-table-column prop="birthday" label="出生日期" width="100">
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" width="110">
          </el-table-column>
          <el-table-column prop="idNumber" label="身份证" width="170">
          </el-table-column>
          <el-table-column label="评估结果" min-width="100">
            <template slot-scope="scope">
              <span v-for="item in scope.row.assessment">
                <button type="button" class="btn btn-link" :title="item.suName + item.dateTime" v-on:click="showAssessmentResult(item.suAnswerId, scope.row)">
                  <span class="fa fa-eye"></span>
                  <!-- span>{{item.suName}}</span -->
                  <span> {{item.dateTime}}</span>
                </button>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100">
            <template slot-scope="scope">
              <button type="button" class="btn btn-link btn-add" v-on:click="addAssessment(scope.row)" title="新建调查">
                <span class="el-icon-circle-plus-outline"></span>
              </button>
              <button type="button" class="btn btn-link btn-info" v-on:click="showPersonnel(scope.row)" title="查看">
                <i class="fa fa-drivers-license"></i>
              </button>
              <button type="button" class="btn btn-link btn-edit" v-on:click="showEdit(scope.$index, scope.row)" title="编辑">
                <i class="el-icon-edit"></i>
              </button>
              <button type="button" class="btn btn-link danger" v-on:click="delPersonnel(scope.$index, scope.row)" title="删除">
                <i class="el-icon-delete"></i>
              </button>
              <!--
              <button type="button" class="btn btn-primary" v-on:click="addAssessment(scope.row)" title="新建调查">
                <span class="el-icon-circle-plus-outline"></span>
              </button>
              <button type="button" class="btn btn-info" v-on:click="showPersonnel(scope.row)" title="查看">
                <i class="fa fa-drivers-license"></i>
              </button>
              <button type="button" class="btn btn-warning" v-on:click="showEdit(scope.$index, scope.row)" title="编辑">
                <i class="el-icon-edit"></i>
              </button>
              <button type="button" class="btn btn-danger" v-on:click="delPersonnel(scope.$index, scope.row)" title="删除">
                <i class="el-icon-delete"></i>
              </button>
              -->
            </template>
          </el-table-column>
      </el-table>
      <el-pagination v-if="total>0"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout="prev, pager, next, total"
      :total="total">
      </el-pagination>
    </div>
  </div>
  <el-dialog width="80%"
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
    <form class="form-horizontal">
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">姓名</span>
          <input type="text" class="form-control" placeholder="姓名" name="name" v-model="formData.name">
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">性别</span>
          <select class="form-control" placeholder="性别" name="sex" v-model="formData.sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">身份证</span>
          <input type="text" class="form-control" placeholder="身份证" name="idNumber" v-model="formData.idNumber" v-on:change="setBirthdayAndAge">
          <span class="input-group-addon red">*</span>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">民族</span>
          <input type="text" class="form-control" placeholder="民族" name="nationality" v-model="formData.nationality">
        </div>
        <div class="input-group">
          <span class="input-group-addon">联系电话</span>
          <input type="text" class="form-control" placeholder="联系电话" name="phone" v-model="formData.phone">
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">出生日期</span>
          <input type="text" disabled="disabled" class="form-control" placeholder="出生年月日" name="birthday" v-model="formData.birthday">
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">身高</span>
          <input type="text" class="form-control" placeholder="身高" name="height" v-model="formData.height">
          <span class="input-group-addon">CM <span class="red">*</span></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">体重</span>
          <input type="text" class="form-control" placeholder="体重" name="weight" v-model="formData.weight">
          <span class="input-group-addon">KG <span class="red">*</span></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">年龄</span>
          <input type="text" disabled="disabled" class="form-control" placeholder="年龄" name="age" v-model="formData.age">
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">职业</span>
          <input type="text" class="form-control" placeholder="职业" name="occupation" v-model="formData.occupation">
        </div>
        <div class="input-group">
          <span class="input-group-addon">文化程度</span>
          <select class="form-control" name="education" v-model="formData.education">
            <option v-for="(item, key) in $store.getters.getDictionary.education" :value="key">{{item}}</option>
          </select>
        </div>
        <div class="input-group">
          <span class="input-group-addon">婚姻状况</span>
          <select class="form-control" name="maritalStatus" v-model="formData.maritalStatus">
            <option v-for="(item, key) in $store.getters.getDictionary.maritalStatus" :value="key">{{item}}</option>
          </select>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">经济来源</span>
          <select class="form-control" name="incomeSource" v-model="formData.incomeSource">
            <option v-for="(item, key) in $store.getters.getDictionary.incomeSource" :value="key">{{item}}</option>
          </select>
        </div>
        <div class="input-group">
          <span class="input-group-addon">收入水平</span>
          <select class="form-control" name="incomeLevel" v-model="formData.incomeLevel">
            <option v-for="(item, key) in $store.getters.getDictionary.incomeLevel" :value="key">{{item}}</option>
          </select>
        </div>
        <div class="input-group">
          <span class="input-group-addon">日常生活支出</span>
          <select class="form-control" name="dailyExpenses" v-model="formData.dailyExpenses">
            <option v-for="(item, key) in $store.getters.getDictionary.dailyExpenses" :value="key">{{item}}</option>
          </select>
        </div>
      </div>
      <!-- div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">社保缴纳情况</span>
          <input type="text" class="form-control" placeholder="社保缴纳情况" name="insuranceStatus" v-model="formData.insuranceStatus">
        </div>
        <div class="input-group">
          <span class="input-group-addon">社保卡号</span>
          <input type="text" class="form-control" placeholder="社保卡号" name="insuranceCardId" v-model="formData.insuranceCardId"> 
        </div>
      </div -->
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">常住居所</span>
          <select class="form-control" name="residenceType" v-model="formData.residenceType">
            <option v-for="(item, key) in $store.getters.getDictionary.residenceType" :value="key">{{item}}</option>
          </select>
        </div>
        <div class="input-group">
          <span class="input-group-addon">长期居住状态</span>
          <select class="form-control" name="residentialStatus" v-model="formData.residentialStatus">
            <option v-for="(item, key) in $store.getters.getDictionary.residentialStatus" :value="key">{{item}}</option>
          </select>
        </div>
        <!-- div class="input-group">
          <span class="input-group-addon">语言</span>
          <input type="text" class="form-control" placeholder="使用语言" name="speakLanguage" v-model="formData.speakLanguage">
        </div -->
      </div>
      <!-- div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">血压</span>
          <input type="text" class="form-control" placeholder="" name="bloodPressure" v-model="formData.bloodPressure">
        </div>
        <div class="input-group">
          <span class="input-group-addon">体温</span>
          <input type="text" class="form-control" placeholder="体温" name="temperature" v-model="formData.temperature">
        </div>
        <div class="input-group">
          <span class="input-group-addon">生命体征</span>
          <input type="text" class="form-control" placeholder="生命体征" name="vitalSign" v-model="formData.vitalSign">
        </div>
      </div -->
      <div class="form-inline bottom10">
        <div class="input-group" style="width: 92%;">
          <span class="input-group-addon">备注</span>
          <textarea class="form-control" placeholder="备注信息" name="description" v-model="formData.description"></textarea>
        </div>
      </div>
      <div class="textCenter">
        <button type="button" class="btn btn-custom" v-on:click="onSubmit(true)">保存并新增评估</button>
        <button type="button" class="btn btn-custom" v-on:click="onSubmit(false)">保存</button>
      </div>
    </form>
  </el-dialog>
  <el-dialog id="assessmentDialog" width="70%"
  title="新增评估调查"
  :visible.sync="assessmentDialog"
  :before-close="handleClose2">
    <newAssessment ref="assessment" :personnelData="selectPersonnel" @closeDialog="()=> assessmentDialog = flase"></newAssessment>
  </el-dialog>
  <el-dialog width="60%"
  title="展示历史评估结果"
  :visible.sync="showResultDialog"
  :before-close="handleCloseShowResult">
    <assessmentResult ref="assessmentResult" :personnel="selectPersonnel" :assessmentData="resultData"></assessmentResult>
  </el-dialog>
  <el-dialog width="60%"
  title="导入评估数据"
  :visible.sync="importAssessmentDialog">
    <div class="textCenter">
      <input type="file" name="importFile" id="importFile" />
      <button type="button" class="btn btn-custom" v-on:click="importAssessmentFile">提交</button>
    </div>
  </el-dialog>
  <el-dialog width="60%"
  title="查看客户信息"
  :visible.sync="personnelInfoDialog"
  >
    <personnelInfo :personnel="selectPersonnel"></personnelInfo>
  </el-dialog>
</div>
</template>
<script>
import newAssessment from './assessment/newAssessment.vue'
import assessmentResult from './assessment/assessmentResult.vue'
import personnelInfo from './personnelInfo.vue'

export default {
  name: 'healthPersonnel',
  data () {
    return {
      searchData: {},
      pageNum: 1,
      pageSize: 20,
      total: 0,
      personnelList: [],
      // 添加 编辑 客户信息对话框
      dialogVisible: false,
      dialogTitle: '',
      formData: {},
      // 问卷调查对话框
      assessmentDialog: false,
      selectPersonnel: {},
      // 展示历史调查结果
      showResultDialog: false,
      resultData: {},
      // 导入调查数据
      importAssessmentDialog: false,
      // 查看客户信息弹窗
      personnelInfoDialog: false
    }
  },
  props: {
  },
  components: {
    newAssessment,
    assessmentResult,
    personnelInfo
  },
  methods: {
    // 检查离线调查，如果存在未完成的离线调查，则自动显示调查试卷
    checkLocalStorage () {
      if (localStorage.getItem("currentAssessment")) {
        this.$confirm('是否继续未完成的离线调查？').then(
          () => {
            let storageData = JSON.parse(localStorage.getItem("currentAssessment"))
            this.selectPersonnel = storageData.personnel
            this.assessmentDialog = true
          }
        ).catch( () => {
          localStorage.removeItem('currentAssessment')
        })
        return true
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    },
    handleClose2 (done) {
      this.$confirm('关闭窗口会丢失当前未完成的调查记录数据,确认关闭？')
      .then(_ => {
        // 关闭前清空未完成的调查数据
        this.$refs.assessment.clearAll()
        done()
      })
      .catch(_ => {})
    },
    handleCloseShowResult (done) {
      this.$refs.assessmentResult.clearAll()
      done()
      this.resultData = {}
      this.selectPersonnel = {}
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getPersonnelByPage()
    },
    getPersonnelByPage () {
      let searchData =  this.searchData
      searchData.pageNum = this.pageNum
      searchData.pageSize = this.pageSize
      this.$http.get('cutomer/getCustomersByCon?conditionStr=' + encodeURIComponent(JSON.stringify(searchData))).then(
        response => {
          this.personnelList = response.data.data.personnel
          this.total =  response.data.data.total
          this.pageNum = response.data.data.pageNum
          this.pageSize = response.data.data.pageSize
        }
      )
    },
    getPersonnelList () {
      this.$http.get('cutomer/listAll').then(
        response => {
          this.personnelList = response.data.data
        }
      )
    },
    searchPersonnel () {
      let isSearch = false
      for(let key in this.searchData) {
        if(this.searchData[key] !== '') {
          // console.log(key, this.searchData[key])
          isSearch = true
        }
      }
      if (!isSearch) {
        alert('至少需要选择一项过滤条件')
        return false
      }
      this.getPersonnelByPage()
    },
    chearSearch () {
      this.searchData = {}
      this.pageNum = 1
      this.getPersonnelByPage()
    },
    setBirthdayAndAge () {
      if (!this.$fun.chackIdCard(this.formData.idNumber)) {
        alert('身份证格式不正确')
        return false;
      }
      this.formData.birthday = this.$fun.getBirthdayFromIdCard(this.formData.idNumber)
      this.formData.age = this.$fun.getAgeByBirthday(this.formData.birthday)
      // vue绑定不能及时刷新页面显示，手动对element赋值
      $("input[name='birthday']").val(this.formData.birthday)
      $("input[name='age']").val(this.formData.age)
    },
    addPersonnel (isAddAssessment) {
      // this.formData.organizationId = 1
      // this.formData.appraiserId = 3
      this.$alert('正在保存数据...', '', true)
      this.$http.post('cutomer/saveCustomerInfo', this.formData).then(
        response => {
          this.$alert('', '', false)
          alert(response.data.message)
          this.getPersonnelByPage()
          this.dialogVisible = false
          if (isAddAssessment) {
            this.selectPersonnel = response.data.data
            this.assessmentDialog = true
          }
        }
      )
    },
    updataPersonnel () {
    },
    showAdd () {
      this.dialogTitle = '添加人员信息'
      this.formData = {}
      this.dialogVisible = true
    },
    showEdit (index, row) {
      this.dialogTitle = '编辑人员信息'
      this.formData = {}
      this.formData = row
      this.dialogVisible = true
    },
    onSubmit (isAddAssessment) {
      // this.formData.id ? this.updataPersonnel() : this.addPersonnel(false)
      this.addPersonnel(isAddAssessment)
    },
    delPersonnel (index, row) {
      if (confirm('确认删除？') === false ) return false
      this.$http.delete('cutomer/deleteById/' + row.id).then(
        response => {
          alert(response.data.message)
          this.personnelList.splice(index, 1)
        }
      )
    },
    showPersonnel (personnel) {
      this.selectPersonnel = personnel
      this.personnelInfoDialog = true
    },
    addAssessment (personnel) {
      this.selectPersonnel = personnel
      this.assessmentDialog = true
    },
    showAssessmentResult (assessmentResultId, personnel) {
      this.selectPersonnel = personnel
      this.$http.get('surveyAnswer/findOneById?id=' + assessmentResultId).then(
        response => {
          this.resultData = response.data.data
          this.showResultDialog = true
        }
      )
    },
    importAssessmentFile () {
      let fileObj = document.getElementById('importFile').files[0]
      if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        alert("请选择文件")
        return
      }

      //加入文件对象
      let formFile = new FormData()
      formFile.append("file", fileObj)
      this.$alert('正在分析...', '', true)
      this.$http.post('surveyAnswer/uploadOffLineSurvey', formFile).then(
        response => {
          document.getElementById('importFile').value = null
          this.importAssessmentDialog = false
          this.resultData = response.data.data
          this.personnelList.map(
            personnel => {
              if (personnel.id === this.resultData.personnelId) {
                this.selectPersonnel = personnel
              }
            }
          )
          this.$alert('', '', false)
          this.showResultDialog = true
        }
      )
    }
  },
  beforeCreate () {},
  created () {},
  beforeMount () {},
  mounted () {
    // this.getPersonnelList()
    this.getPersonnelByPage()
    this.checkLocalStorage()
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-control{height: 30px;}
.form-inline > .input-group{width: 29%; margin-left:2%;}
.input-group .btn { padding: 4px 10px; }
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
 }
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 120px;
 }
@media (max-width: 800px){
  .form-inline > .input-group{
    width: 98%; margin: 5px auto;
  }
  .searchBox{
    height: auto !important;
  }
}
</style>
